<template>
    <div class="thereTelBox" v-if="maskShow">
        <div class="thereTel" :style="style">
            <div class="drag" @mousedown="move">
                <span class="loginClose el-icon-close" @click="maskShow=false"></span>
            </div>
            <div>
                <p class="thereTelNum">
                    绑定手机号
                </p>
                <form action="" @submit.prevent="register">
                    <div class="registerBox">
                        <ul>
                            
                            <li class="registerList">
                                <input v-model="thereTelNumMsg"  v-validate data-vv-rules="required|mobile" data-vv-as="手机号" id="registerMobile" type="mobile" class="" name="mobile" required placeholder="请输入手机号码" maxlength="11">
            <span class="help-block" id="verSpan" v-show="errorBags.has('mobile')">{{errorBags.first('mobile')}}</span>
                            </li>
                            
                            <li class="registerList">
                                <input type="text" placeholder="输入验证码" v-model="thereVeriNum" style="width: 205px;padding-left: 10px;background-image:none">
                                <button class="threeVerNumBtn" :disabled="disabledOnoff" type="button" @click="emitverCode('register','registerMobile')" >{{thereVerText}}</button>
                            </li>
                        <li class="registerList" v-if="registerOnoff">
                            <input v-model="name" placeholder="昵称"
                                v-validate data-vv-rules="required|max:7" data-vv-as="昵称"
                                id="name" type="text" class="form-control" name="name" required disabled>
                            <span class="help-block" v-show="errorBags.has('name')">{{errorBags.first('name')}}</span>
                        </li>
                        <li class="registerList" v-if="registerOnoff">
                            <input v-model="therePassword" placeholder="设置密码"
            v-validate data-vv-rules="required|min:6|max:18" data-vv-as="密码"
                type="password" class="form-control" name="password" required>
        <span class="help-block" v-show="errorBags.has('password')">{{errorBags.first('password')}}</span>
                        </li>
                        
                    </ul>
                        <div class="registerBtn">
                            <div>
                                <button @submit.prevent="register">完成</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>
<script>
import jwtToken from '../helpers/jwt'
import { ErrorBag } from 'vee-validate';

import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
export default {
    name:'thereTel',
    data(){
        return{
            style:{//弹窗的位置
                top: "300px",
                left: "600px"
            },
            name:"",
            avatar : '',//头像
            thereTelNumMsg:'',//手机号
            thereVeriNum:'',//验证码
            therePassword:'',//密码
            disabledOnoff : false,
            maskShow:false,//模块的显示与隐藏
            disabledOnoff:false,//控制发送验证码按钮
            thereVerText:'发送验证码',
            registerOnoff:false,//是否注册
            disabledNum : 60,//验证码倒计时
            openId :'',
            threeType:'',
        }
    },
    methods:{
        ...mapActions(//mutations中的方法
            ["setAuthUser"]
        ),
        maskPosition(){//登录弹出框的位置
            this.style.left = (document.body.offsetWidth - 354)/2 +"px";
            this.style.top = (document.documentElement.clientHeight - 400)/2 +"px";
        },
        move(e){//弹出框拖拽
	      let odiv = e.target.parentNode;    //获取目标元素
	       
	      //算出鼠标相对元素的位置
	      let disX = e.clientX - odiv.offsetLeft;
	      let disY = e.clientY - odiv.offsetTop;
	      document.onmousemove = (e)=>{    //鼠标按下并移动的事件
	        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
	        let left = e.clientX - disX;  
	        let top = e.clientY - disY;
	         
	        //绑定元素位置到positionX和positionY上面
	        this.positionX = top;
	        this.positionY = left;
	         
	        //移动当前元素
	        odiv.style.left = left + 'px';
	        odiv.style.top = top + 'px';
	      };
	      document.onmouseup = (e) => {
	        document.onmousemove = null;
	        document.onmouseup = null;
	      };
        },
        msgError(msg) {//账号密码输入错误提示信息
            this.$message({
                message: msg,
                type: 'error',
                customClass : "errorStyle",
                duration : 1500,
                showClose : true
            });
        },
        emitverCode(sort,id){//验证码获取
            if($("#"+id).next().css("display")=="none"){
                var This = this;
                    if($("#verSpan").css("display")&&this.thereTelNumMsg){
                        this.disabledOnoff = true;//发送验证码按钮禁用
                        This.thereVerText =  This.disabledNum+"s";
                        var timer = setInterval(function(){
                            This.thereVerText =  This.disabledNum+"s";
                            This.disabledNum--;
                            if(This.disabledNum==0){
                                This.disabledNum =  59;
                                This.disabledOnoff=false;
                                This.thereVerText="再次获取";
                                clearInterval(timer)
                            }
                        },1000)
                        var formData = {
                            'mobile':this.thereTelNumMsg,
                            'method':'bangding'
                        }
                        axios.post('/sendcode',formData).then(response => {
                            if(response.data.registed==1){
                                this.registerOnoff = false;
                            }else{
                                this.registerOnoff = true;
                                // this.msgError('验证码发送失败')
                            }
                        }).catch(error=>{
                            this.msgError('手机号码已注册')
                        })
                    }else if(!this.thereTelNumMsg){
                        this.msgError('请输入手机号码')
                    }
                }
        },
        register(){
            if(this.registerOnoff){
                if(!this.name){
                    this.msgError('请输入昵称')
                }else if(!this.therePassword){
                    this.msgError('请输入密码')
                }else{
                    var fromData = {
                        "registed" : 0,
                        "name":this.name,
                        "password" : this.therePassword,
                        "code" : this.thereVeriNum,
                        "mobile" : this.thereTelNumMsg,
                        "type" : this.threeType,
                        "openid" : this.openId,
                        "avatar" : this.avatar,
                    };
                    axios.post('/threeregister',fromData).then(response =>{
                        jwtToken.setToken(response.data.token)
                        jwtToken.setAuthId(response.data.auth_id)
                        this.setAuthUser();
                        this.maskShow = false;
                        var locatUrlIndex = window.location.hash.indexOf('?');
                        window.location.hash = window.location.hash.slice(locatUrlIndex,locatUrlIndex)
                    })
                 }
                
            }else{ 
                
                var fromData = {
                    "registed" : 1,
                    "code" : this.thereVeriNum,
                    // "name":this.name,
                    "mobile" : this.thereTelNumMsg,
                    "type" : this.threeType,
                    "openid" : this.openId,
                    "avatar" : this.avatar,
                };
                axios.post('/threeregister',fromData).then(response =>{
                    jwtToken.setToken(response.data.token)
                    jwtToken.setAuthId(response.data.auth_id)
                    this.setAuthUser();
                    this.maskShow = false;
                    var locatUrlIndex = window.location.hash.indexOf('?');
                    window.location.hash = window.location.hash.slice(locatUrlIndex,locatUrlIndex)
                })
            } 
        }
    },

    mounted() { 
        this.maskPosition();
        window.onresize = ()=>{
            this.maskPosition();
        }
   },
   created() {
       var locatUrlIndex = window.location.search.indexOf('?');
       var locatUrl = window.location.search.slice(locatUrlIndex+1).split('=');
        if(locatUrl[0]=="hashtoken"){
           axios.get("/threecallback/"+locatUrl[1]).then(response => {
               if(response.data.original){
                   jwtToken.setToken(response.data.original.token)
                    jwtToken.setAuthId(response.data.original.auth_id)
                    this.setAuthUser();
                    this.maskShow = false;
                    var locatUrlIndex = window.location.hash.indexOf('?');
                    window.location.hash = window.location.hash.slice(locatUrlIndex,locatUrlIndex)
               }else{
                   this.maskShow = true;
                    this.threeType = response.data.type;
                    this.openId = response.data.openid;
                    this.name = response.data.nickname;
                    this.avatar = response.data.avatar;
               }
               
            }); 
        }
       
   },
}
</script>
<style>
.thereTelNum{
    font-size: 14px;
    line-height: 66px;
    color: #333333;
    font-weight: bold;
    margin-top: 9px;
    padding-left: 32px;
}
.thereTelBox .registerBox{
    margin-top:0;
    border-radius: 4px;
}
.thereTelBox .thereTel{
    min-height: 283px;
}
.thereTelBox .registerBtn{
    padding-bottom: 52px;
}
.thereTelBox .registerList .threeVerNumBtn{
    width: 122px;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    color: rgb(255, 255, 255);
    border: none;
    padding: 0px;
    outline: none;
    background: #ea514b;
    margin-left: 1px;
    border-radius: 4px;
}
.thereTelBox .registerList .threeVerNumBtn:hover{
    background: rgb(227, 131, 127);
}
.thereTelBox .registerList:nth-of-type(3) input{
    width: 100%;
}
</style>